<template>
  <div>
    <!-- 点赞按钮组件封装 -->
    <van-icon
      color="#777"
      :name="articleInfo.attitude==1 ? 'good-job': 'good-job-o'"
      :class="{active : articleInfo.attitude==1}"
      :loading="loadingBtn"
      @click="attitudeBtn"
    />
  </div>
</template>
           
<script>
import { addAttitude_api, delAttitude_api } from "@/api/article/index";
export default {
  props: {
    articleInfo: {
      type: [Object, Array],
      required: true
    },
    
  },
  data() {
    return {
      loadingBtn: false //点击按钮出现加载状态
    };
  },
  methods: {
    async attitudeBtn() {
      this.loadingBtn = true;
      try {
        if (this.articleInfo.attitude) {
          const { data: res } = await delAttitude_api(this.articleInfo.art_id);
        //   this.$toast.success('取消点赞')
        } else {
          const { data: res } = await addAttitude_api(this.articleInfo.art_id);
        //   this.$toast.success('点赞成功')
        }
        this.$toast.success(!this.articleInfo.attitude==1 ? '点赞成功':'取消点赞')
      } catch (err) {
        if (err.response.status == 401) {
          return this.$toast("请先登录。。。");
        }
      }
      this.loadingBtn = false;
      this.$emit("att", !this.articleInfo.attitude);
    }
  }
};
</script>
<style scoped lang="less">
.active {
  color: orangered;
  font-size: 40px;
}
.van-icon {
    font-size: 40px;
}
</style>